﻿@page "/components/fileupload"
@page "/components/fileuploader"
<DocsPage>
    <DocsPageHeader Title="File Upload"
                    SubTitle="Example on how to compose a file upload button">
        <Description>

            <MudText Typo="@Typo.body1" Class="mt-4">
                To create a file upload button, we must use two elements: a <CodeInline>label</CodeInline> and an <CodeInline>input</CodeInline>.
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                When we set the <CodeInline>for</CodeInline> attribute to the same value as the <CodeInline>id</CodeInline> of the input, we enable the input to be triggered by clicking on the label. So the trick is to style the label to look like a button and hide the input.
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                So, the styling part is solved. But to handle the files in Blazor without using JavaScript, we need an <CodeInline>InputFile</CodeInline> component.
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                If you are working with .Net Core 3.1 or earlier, you should install the
                <MudButton Variant="Variant.Text"
                           Color="Color.Primary"
                           EndIcon="@Icons.Filled.Link"
                           Link="https://www.nuget.org/packages/BlazorInputFile" target="_blank" rel="noopener noreferrer">
                    nuget package InputFile
                </MudButton>
                , created by Steve Sanderson and reference it in your _host.cshtml or index.html (Server Side Blazor or Client Side Blazor).
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                See
                <MudButton Variant="Variant.Text"
                           Color="Color.Primary"
                           EndIcon="@Icons.Filled.Info"
                           Link="https://blog.stevensanderson.com/2019/09/13/blazor-inputfile/" target="_blank" rel="noopener noreferrer">
                    more info
                </MudButton>
                on how to install it.
            </MudText>
            <br />
            <MudText Typo="@Typo.body1">
                After uploading the files, you will receive an <CodeInline>IFileListEntry[]</CodeInline> and then you will have to manage the upload or make the appropriate validations.
            </MudText>
            <br />
            <br />

            <MudText Typo="@Typo.body1">
                If your project is .Net 5.0, <CodeInline>InputFile</CodeInline> is a native component and you don't need to install it.
                See more info
                <MudButton Variant="Variant.Text"
                           Color="Color.Primary"
                           EndIcon="@Icons.Filled.Info"
                           Link="https://docs.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-5.0" target="_blank" rel="noopener noreferrer">
                   here
                </MudButton>

            </MudText>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Use any type of MudButton">
                <Description>Use a <CodeInline>MudButton</CodeInline>, a <CodeInline>MudIconButton</CodeInline> or a <CodeInline>MudFab</CodeInline> with the <CodeInline>HtmlTag</CodeInline> property set to "label" in combination with a hidden <CodeInline>InputFile</CodeInline>. That way, the <CodeInline>MudButton</CodeInline> will render a label element.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <FileUploadButtonExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="FileUploadButtonExample" GitHubFolderName="Button" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Use a standard label">
                <Description>Use an html label styled to your liking in combination with a hidden <CodeInline>InputFile</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent FullWidth="true" DarkenBackground="true">
                <FileUploadIconButtonExample />
            </SectionContent>
            <SectionSource ShowCode="false" Code="FileUploadIconButtonExample" GitHubFolderName="Button" />
        </DocsPageSection>


        <DocsPageSection>
            <SectionHeader Title="Validation">
                <Description>Use the <CodeInline>accept</CodeInline> attribute to limit the type of files you want.</Description>
            </SectionHeader>            
            <SectionContent FullWidth="true" DarkenBackground="true">
                <FileUploadValidationExample />
            </SectionContent>
            <SectionSource ShowCode="false"  Code="FileUploadValidationExample" GitHubFolderName="Button"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Drag and Drop Example">
                <Description>Using the example below, you can compose a drag-and-drop uploader.</Description>
            </SectionHeader>            
            <SectionContent FullWidth="true" DarkenBackground="true">
                <DragAndDropFileUploadExample />
            </SectionContent>
            <SectionSource ShowCode="false"  Code="DragAndDropFileUploadExample" GitHubFolderName="Button"  />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
